<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商品详情 - 民大商城</title>
    <link rel="stylesheet" type="text/css" href="./css/webbase2.css"/>
    <!-- 自定义 Tailwind 配置 -->
    <link rel="stylesheet" type="text/css" href="./css/top-nav-optimized.css"/>
    <link rel="stylesheet" type="text/css" href="./css/webbase.css" />
    <link rel="stylesheet" href="./css/index.css"/>
    <style>
        /* 商品详情页面样式 */
        .detail-container {
            width: 1210px;
            margin: 50px auto;
            background: #fff;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transform: translateY(-20px); /* 调整这个值来控制移动的距离 */
        }

        .detail-header {
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* 返回按钮样式 */
        .back-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            background-color: #f5f5f5;
            color: #333;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .back-btn:hover {
            background-color: #e8e8e8;
            color: #e4393c;
        }

        .back-btn i {
            margin-right: 6px;
        }

        .detail-body {
            display: flex;
            padding: 20px 0;
            position: relative;
        }

        .detail-image {
            width: 400px;
            height: 400px;
            object-fit: contain;

        }

        .detail-info {
            position: absolute;
            left: 50%; /* 将detail-info放在最右边 */

        }

        .detail-info p {
            margin: 15px 0;
            line-height: 1.8;
            font-size: 16px;
        }

        .price {
            color: #e4393c;
            font-size: 24px;
            font-weight: bold;
        }

        .detail-footer {
            display: flex;
            justify-content: center;
            gap: 30px;
            padding-top: 30px;
            border-top: 1px solid #eee;
            margin-top: 20px;
        }

        .buy-btn {
            width: 200px; /* 按钮的宽度 */
            height: 50px; /* 按钮的高度 */
            border-radius: 25px; /* 圆角，可以根据需要调整 */
            border: none; /* 去掉边框 */
            background-color: red; /* 背景颜色 */
            color: white; /* 文字颜色 */
            font-size: 16px; /* 文字大小 */
            cursor: pointer; /* 鼠标悬停变为手型 */
            margin: 5px; /* 按钮之间的间距 */
            transform: translateY(-20px); /* 调整这个值来控制移动的距离 */
        }

        /* 自定义添加购物车成功弹窗样式 */
        .custom-cart-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
            z-index: 9999; /* 确保在最上层 */
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
        .modal-box {
            width: 400px;
            background: #fff;
            border-radius: 10px;
            padding: 30px 20px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 阴影增强层次感 */
        }
        .modal-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }
        .modal-desc {
            font-size: 16px;
            color: #666;
            margin-bottom: 30px;
            line-height: 1.5;
        }
        .modal-btn-group {
            display: flex;
            justify-content: center;
            gap: 20px; /* 按钮间距 */
        }
        .modal-btn {
            padding: 10px 30px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        /* 继续购物按钮（灰色） */
        .continue-btn {
            background: #f5f5f5;
            color: #333;
        }
        .continue-btn:hover {
            background: #e8e8e8;
        }
        /* 去购物车按钮（红色，呼应商城主色调） */
        .goto-cart-btn {
            background: #e4393c;
            color: #fff;
        }
        .goto-cart-btn:hover {
            background: #c81623; /* hover时加深颜色 */
        }

        .buy-btn:hover {
            background: #c81623;
        }
        .dy{
            font-size: 50%;
        }
    </style>
</head>

<body>
<div id="app">
    <!-- 复用顶部组件 -->
    <top></top>

    <div class="detail-container">
        <div class="detail-header">
            <!-- 添加返回按钮 -->
            <button class="back-btn" @click="goBack">
                <i>←</i> 返回上一页
            </button>
            <h2>{{ currentItem.name }}</h2>
        </div>

        <div class="detail-body">
            <img :src="currentItem.image" alt="商品图片" class="detail-image">
            <div class="detail-info">
                <p class="dy"><strong>价格：</strong><span class="price">￥{{ util.formatPrice(currentItem.price) }}</span></p>
                <p class="dy"><strong>品牌：</strong>{{ currentItem.brand }}</p>
                <p class="dy"><strong>分类：</strong>{{ currentItem.category }}</p>
                <p class="dy"><strong>库存：</strong>{{ currentItem.stock }}件</p>
                <p class="dy"><strong>销量：</strong>{{ formatCount(currentItem.sold) }}</p>
                <p class="dy"><strong>评论数：</strong>{{ formatCount(currentItem.commentCount) }}条</p>
            </div>
        </div>

        <div class="detail-footer">
            <button class="buy-btn" @click="buyNow(currentItem)">
                <span>立刻购买</span>
            </button>
            <button class="buy-btn" @click="add2Cart(currentItem)">
                <span>加入购物车</span>
            </button>
        </div>
    </div>
    <!-- 自定义添加购物车成功弹窗（默认隐藏） -->
    <div class="custom-cart-modal" v-show="showCartModal" @click="closeCartModal">
        <div class="modal-box" @click.stop> <!-- @click.stop 防止点击弹窗内部触发遮罩关闭 -->
            <div class="modal-title">添加成功！</div>
            <div class="modal-desc">商品已成功加入购物车，您可以选择继续购物或前往购物车结算~</div>
            <div class="modal-btn-group">
                <button class="modal-btn continue-btn" @click="continueShopping">继续购物</button>
                <button class="modal-btn goto-cart-btn" @click="gotoCartPage">去购物车</button>
            </div>
        </div>
    </div>
</div>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="js/common.js"></script>
<script src="js/top.js"></script>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            currentItem: {},
            util,
            user: null,
            showCartModal: false, // 新增：控制添加购物车成功弹窗
        },
        created() {
            // 获取URL中的商品ID
            const itemId = util.getUrlParam("id");
            if (!itemId) {
                alert("商品ID不存在");
                history.back();
                return;
            }

            // 获取用户信息
            this.user = util.store.get("user-info");
            // 加载商品详情
            this.loadItemDetail(itemId);
        },
        methods: {
            // 添加返回上一页方法
            goBack() {
                window.history.back();
            },
            loadItemDetail(id) {
                axios.get(`/items/${id}`)
                    .then(resp => {
                        this.currentItem = resp; // 根据实际接口返回结构调整
                    })
                    .catch(err => {
                        console.error('获取商品详情失败', err);
                        alert('加载商品详情失败，请重试');
                        history.back();
                    });
            },
            formatCount(count) {
                if (count < 10000) {
                    return count;
                } else {
                    return Math.floor(count / 10000) + "万+";
                }
            },
            toOrderConfirm(id) {
                location.href = "/order-confirm.html?id=" + id;
            },
            buyNow(item) {
                // 验证登录状态（未登录则跳转登录页）
                if (!util.isLogin()) {
                    location.href = "/login.html";
                    return;
                }
                // 构造结算页需要的商品格式（与结算页 items 结构匹配）
                const orderItem = {
                    id: item.id,
                    itemId: item.id,  // 结算页需要 itemId 字段
                    name: item.name,
                    image: item.image,
                    price: item.price,
                    num: 1,  // 默认为1件
                    stock: item.stock || 1000,  // 确保有库存字段
                    spec: item.spec || "{}"  // 规格信息，默认空对象
                };

                // 将商品信息存入本地存储（结算页会读取此数据）
                util.store.set("selectedCarts", [orderItem]);

                // 跳转到结算页
                location.href = "./order-confirm.html";
            },
            add2Cart(item){
                console.log('加入购物车方法被调用，商品信息：', item); // 新增日志
                let { id, ... param} = item;
                param.itemId = id;
                param.num = 1;
                if(!util.isLogin()){
                    location.href = "/login.html"
                    return;
                }
                // 已登录：请求添加购物车
                axios.post("/carts", param)
                    .then(resp => {
                        console.log('添加购物车成功，准备显示弹窗'); // 新增日志
                        // 添加成功：显示自定义弹窗
                        this.showCartModal = true;
                    })
                    .catch(err => {
                        console.log(err.response.data);
                        alert(err.response.data.msg || "添加购物车失败")
                    })
            },
            // 新增：关闭购物车弹窗
            closeCartModal() {
                this.showCartModal = false;
            },
            // 新增：继续购物（关闭弹窗）
            continueShopping() {
                this.showCartModal = false;
            },
            // 新增：前往购物车页面（关闭弹窗+跳转）
            gotoCartPage() {
                this.showCartModal = false;
                location.href = "/cart.html";
            }
        }
    });
</script>
</body>

</html>